<template>
  <div class="nav_outer">
    <Header>服务站点</Header>
    <div class="locatabs">
      <div v-bind:class="{tab:true,'on':statu==1}" @click="hidemask">
        <span>附近</span>
      </div>
      <div v-bind:class="{tab:true,'on':statu==2}" @click="showmask">
        <span>筛选</span>
      </div>
    </div>
    <div class="mui-backdrop" v-show="maskshow" :style="{'top':topstyle,'overflow':'scroll'}">
      <div id="popover" class="filterarea">
        <div class="options">
          <div class="provinces">
            <div
              :class="{'province':true,'on': currentProvince.id==item.id}"
              v-for="item in provinces"
              v-bind:key="item.id"
              @click="loadCity(item)"
            >{{item.name}}</div>
            <!-- <div class="province on">江苏</div> -->
          </div>
          <div class="citys">
            <div
              class="city"
              v-for="item in citys"
              v-bind:key="item.id"
              @click="search(item)"
            >{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="locations">
      <div class="location" v-for="item in locates" :key="item.id" @click="navito('locationdetail?id='+item.id)">
        <div class="img_wrap" :style="'background-image:url('+ prefix + item.photo +')'"></div>
        <div class="location_info">
          <h5>{{item.name}}</h5>
          <p>
            <span class="tag">{{item.enrollmentPosition}}</span>
            <span class="fr">{{item.province}}·{{item.city}}</span>
          </p>
        </div>
      </div>
      <div class="refresh"></div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
export default {
  data() {
    return {
      maskshow: false,
      pageNum: 1,
      pageSize: 10,
      locates: [],
      province: "",
      city: "",
      provinces: [],
      citys: [],
      totalPage: 1,
      currentProvince: {},
      statu: 1,
      isInapp: this.app.isInAPP,
      isIos: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
      topstyle: '1.3rem',
      prefix: ''
    };
  },
  mounted() {
    let mui = this.mui,
      that = this;
      this.interactive.reachBottomLoad({
     callback: function(){
       if(that.loading){
          return;
      }
      that.pageNum+=1;
      that.loadlocates();
    }})
  },
  created() {
    this.loadprovince();
    this.loadlocates();
    this.topstyle = (!this.isInapp ? '1.3rem!important' :(this.isIos?'2.94rem!important':'3.5rem!important'));
    this.prefix=this.Http.imgpre;
  },
  methods: {
    showmask() {
      this.maskshow = true;
      this.statu=2;
    },
    hidemask() {
      this.statu=1;
      this.maskshow = false;
      this.pageNum=1;
      this.province = '';
      this.city = '';
      this.loadlocates();
    },
    navito(url) {
      this.$router.push({ path: url });
    },
    loadlocates() {
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http2.get("/mobile/store/page", {
        current: that.pageNum,
        size: that.pageSize,
        province: that.province,
        city: that.city
      }).then(
        res => {
          if (that.pageNum == 1) {
            that.locates = res.object;
          } else {
            that.locates = that.locates.concat(res.object);
          }
          that.totalPage = res.totalPage || 1;
          that.loading = false;
        },
        () => {
          that.loading = false;
        }
      );
    },
    loadprovince() {
      this.Http.get("/yzj/location/provinces", null).then(res => {
        this.provinces = res;
        this.loadCity(res[0]);
      });
    },
    loadCity(item) {
      this.Http.get(`/yzj/location/city/${item.name}`, null).then(res => {
        this.currentProvince = item;
        this.citys = res;
      });
    },
    search(item) {
      this.province = this.currentProvince.name;
      this.city = item.name;
      this.pageNum = 1;
      this.loadlocates();
      this.maskshow = false;
    }
  },
  components: {
    Header
  }
};
</script>

<style lang='scss' scoped>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
.outer > div {
  background: #fff;
}
.locatabs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  .tab {
    flex: 1;
    text-align: center;
    height: px2em(70);
    line-height: px2em(70);
    background: #fff;
    > span {
      display: inline-block;
      height: 100%;
    }
    &.on > span {
      border-top: 3px solid #4689e9;
      padding: 0 1em;
      position: relative;
      top: -3px;
    }
  }
}
.mui-backdrop {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.3);
}
.filterarea {
  position: absolute;
  top: 0;
  background: #fff;
  z-index: 1000;
  text-align: center;
  left: 0;
  width: 100%;
  .options {
    display: flex;
    > div {
      flex: 1;
    }
  }
  .provinces {
    background: #f5f5f5;
    .province {
      padding: px2em(30) 0;
      &.on {
        background: #fff;
      }
    }
  }
  .citys {
    .city {
      padding: px2em(30) 0;
    }
  }
}
.location {
  padding: px2em(30);
  display: flex;
  border-bottom: 1px solid #e2e2e2;
  background: #fff;
  .img_wrap {
    width: px2em(140);
    height: px2em(140);
    background: #5ed3ff;
    background-size: cover;
    background-position: center center;
    margin-right: px2em(50);
  }
  .location_info {
    flex: 1;
    position: relative;
    h5 {
      color: #333;
    }
    .fr {
      color: #333;
    }
    .tag {
      height: px2em(40);
      border-radius: px2em(23);
      line-height: px2em(40);
      color: #5ed3ff;
      border: 1px solid #5ed3ff;
      padding: 0 8px;
      margin-right: 6px;
    }
    > p:last-child {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      margin-bottom: 0;
      font-size: 0.7em;
    }
  }
}
</style>